<template>
  <div>
    <transition name="alpha">
      <div
        style="width: 100%;height: 100vh; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;z-index:10; background-color:#000000;position: fixed;bottom: 0;"
        v-if="visible"></div>
    </transition>
    <transition name="pop">
      <div class="container" v-if="visible">
        <div class="title">
          <div style="display: flex;flex-direction: row;background: white;z-index: 102">
            <img :src="IconClose" style="width: 18px;height:18px;padding: 15px;"
                 v-on:click="onCloseClick"/>
            <span
              style="flex: 1;text-align: center;margin: auto;display: inline-block;position: relative;left: -22px;color: #42578E;font-size: 18px;top: .5px">请选择银行卡</span>
          </div>
        </div>
        <div style="overflow: scroll;display: flex;flex-direction: column;">
          <div style="margin-top: 45px;z-index: 10">
            <div v-for="bankCard,index in bankCardList" v-bind:key="index" class="bank-card">
              <div v-if="bankCard.species!='新'" style="display: flex;flex-direction: row;padding: 15px  0px"
                   v-on:click="onBankCardSelected(bankCard)">
                <svg class="icon" aria-hidden="true"
                     style="width: 35px;height: 35px;position: relative;top:6px;">
                  <use :xlink:href="['#icon-bank'+bankCard.bankNo]"></use>
                </svg>
                <div style="display: flex;flex-direction: column;margin-left: 10px;flex: 1">
                  <div style="display: flex;flex-direction: row">
                <span
                  style="color: #42578E;font-size: 18px;font-weight: 700">{{bankCard.bankName + '(' + bankCard.cardNo + ')'}}</span>
                    <span
                      style="border-width: 1px;color:#D9D9D9;border-radius: 2px;border-color:#D9D9D9;border-style: solid;line-height: 17px;font-size: 13px;height: 16px;position: relative;top: 4px;margin-left: 5px">{{bankCard.species}}</span>
                  </div>
                  <span style="color: #97989C;font-size: 15px">本次限额{{bankCard.currentLimit}}元</span>
                </div>
                <svg v-if="bankCard.isSelected" class="icon" aria-hidden="true"
                     style="width: 30px;height: 30px;position: relative;top:11px;">
                  <use xlink:href="#icon-xuanzhong"></use>
                </svg>
              </div>
              <div v-else style="display: flex;flex-direction: row;padding: 15px  0px">
                <svg class="icon" aria-hidden="true"
                     style="width: 35px;height: 35px;position: relative;top:6px;">
                  <use xlink:href="#icon-yinhangqia"></use>
                </svg>
                <span
                  style="color: #42578E;font-size: 18px;font-weight: 800;flex: 1;line-height: 50px;padding: 0px 12px;">使用新卡</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  import IconClose from '@/assets/icon/icon_close.png'

  export default {
    name: 'HelloWorld',
    props: ['selectedBankCard', 'visible'],
    data () {
      return {
        IconClose: IconClose,
        bankCardList: [
          {
            bankName: '建设银行',
            bankNo: '4',
            cardNo: '4354',
            cardId: '0987665676',
            balance: '10000',
            currentLimit: '10000',
            species: '储',
            isSelected: true
          }, {
            bankName: '建设银行',
            bankNo: '4',
            cardNo: '4354',
            cardId: '0987665675',
            balance: '10000',
            currentLimit: '10000',
            species: '新',
            isSelected: true
          }, {
            bankName: '工商银行',
            bankNo: '3',
            cardNo: '1894',
            cardId: '0987665674',
            balance: '10000',
            currentLimit: '1000',
            species: '信',
            isSelected: false
          }, {
            bankName: '中国银行',
            bankNo: '1',
            cardNo: '6543',
            cardId: '0987665673',
            balance: '10000',
            currentLimit: '1000',
            species: '借',
            isSelected: false
          }, {
            bankName: '农业银行',
            bankNo: '2',
            cardNo: '8764',
            cardId: '0987665672',
            balance: '10000',
            currentLimit: '1000',
            species: '信',
            isSelected: false
          }, {
            bankName: '工商银行',
            bankNo: '3',
            cardNo: '5432',
            cardId: '0987665671',
            balance: '10000',
            currentLimit: '1000',
            species: '信',
            isSelected: false
          }
        ]
      }
    },
    created () {
      this.setRightSelectBankCard(this.selectedBankCard)
    },
    methods: {
      onCloseClick: function () {
        this.onBankCardSelected(this.selectedBankCard)
      },
      onBankCardSelected: function (bankCard) {
        this.setRightSelectBankCard(bankCard)
        this.$emit('onBankCardSelected', bankCard)
      },
      setRightSelectBankCard: function (selectedBankCard) {
        for (let index in this.bankCardList) {
          let bankCard = this.bankCardList[index]
          if (selectedBankCard === undefined) {
            bankCard.isSelected = true
            break
          }
          if (bankCard.cardId === selectedBankCard.cardId) {
            bankCard.isSelected = true
          } else {
            bankCard.isSelected = false
          }
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .title {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: 11;
  }

  .title::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #F8F8F8;
    /*background: red;*/
    position: relative;
    left: 0px;
  }

  .bank-card {
    display: flex;
    flex-direction: column;
    padding: 0px 15px;
  }

  .bank-card::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #F8F8F8;
    /*background: red;*/
    position: relative;
    left: 0px;
  }

  .container {
    z-index: 100;
    width: 100%;
    height: 75vh;
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0vh;
    background: white;
    filter: alpha(Opacity=100);
    -moz-opacity: 1;
    opacity: 1;
  }

  .pop-enter {
    bottom: -70vh;
  }

  .pop-enter-to {
    bottom: 0;
  }

  .pop-enter-active, .pop-leave-active {
    transition: bottom .4s;
    transition-timing-function: ease;
  }

  .pop-leave {
    bottom: 0vh;
  }

  .pop-leave-to {
    bottom: -70vh;
  }

  .alpha-enter {
    opacity: .1
  }

  .alpha-enter-to {
    opacity: 1
  }

  .alpha-enter-active {
    transition: opacity .9s;
    transition-timing-function: ease;
  }

</style>
